<template>
  <div class="prod-wrap" :style="{ maxHeight }">
    <div class="prod-item" v-for="e in arr" :key="e.key">
      <el-select
        filterable
        :disabled="['procureIn'].includes(mode)"
        v-model="e.id"
        placeholder="请选择"
        style="width: 260px"
      >
        <el-option
          v-for="item in listOpts"
          :disabled="item.disabled"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="norms">{{ e.norm }}</div>
      <el-input-number
        style="margin: 0 20px"
        v-model="e.count"
        :min="0"
        :max="e.max || 100000"
        :disabled="e.disabled"
      ></el-input-number>
      <span
        v-if="!['procureIn'].includes(mode) && arr.length > 1"
        class="el-icon-delete"
        style="cursor: pointer"
        @click="remove(e)"
      ></span>
    </div>
    <div class="prod-item">
      <el-button v-if="!['procureIn'].includes(mode)" size="large" @click="add"
        >新增材料</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: "arr",
    event: "change",
  },
  props: {
    arr: {
      type: Array,
      default: () => [{ id: "", count: 0, key: this.$quinn.guid() }],
    },
    mode: {
      type: String,
      default: "",
    },
    api: {
      type: String,
      default: "materialMaterialList", // "newOrderOutMaterials"
    },
    params: {
      type: Object,
      default: () => ({ pageSize: 100000,pageNumber:1 }),
    },
    maxHeight: {
      type: String,
      default: "45vh",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    listOpts() {
      const ids = this.arr.filter((e) => e.id).map((e) => e.id);
      const res = this.list
        .map((e) => {
          e.disabled = ids.includes(e.value);
          return e;
        })
        .sort((a, b) => {
          a = a.disabled ? 1 : 0;
          b = b.disabled ? 1 : 0;
          return a - b;
        });
      return res;
      // filter(e => !ids.includes(e.value))
    },
  },
  watch: {
    arr(oldV, newV) {
       
      // if (value.every((e) => e.id == "")) this.list = [];
    },
    params: {
      immediate: true,
      deep: true,
      handler(obj, oldobj) {
        if (
          JSON.stringify(obj) != JSON.stringify(oldobj) &&
          this.mode == "supplierId" &&
          !!obj["supplierId"]
        )
          this.getList();
      },
    },
  },
  mounted() {
    if (this.mode == "supplierId") this.params.supplierId && this.getList();
    else this.getList();
    // console.log(this.arr,'111')
  },
  methods: {
    add() {
      if (this.listOpts.length <= 0)
        return this.$message.info("暂无更多材料选择");
      let arr = JSON.parse(JSON.stringify(this.arr));
      arr.push({ id: "", count: 0, key: this.$quinn.guid() });
      this.$emit("change", arr);
      // this.arr = arr
    },
    remove(e) {
      let arr = JSON.parse(JSON.stringify(this.arr));
      arr = arr.filter((item) => item.key != e.key);
      this.$emit("change", arr);
      // this.arr = arr
    },
    getList() {
      this.$api[this.api](this.params).then((res) => {

        const arr = [];
        this.list = (res?.rows || res).map((e, i) => {
          let count = e.count || 0;
          let max = e.count || 10000;
          let disabled = false;
          if (this.mode == "procureIn") {
            count = 0;
            max = 100000;
          }
          arr.push({
            id: `${e.materialId || i}`,
            norm: e.norm,
            count,
            max,
            disabled,
            key: this.$quinn.guid(),
          });
          return {
            label: `${e.materialName} - ${e.materialId} - ${e.color} - ${e.norm}`,
            value: `${e.materialId || i}`,
          };
        });
        if (this.mode == "procureIn") this.$emit("change", arr);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.prod-wrap {
  overflow-y: auto;
}

.prod-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .norms {
    min-width: 100px;
    padding-left: 20px;
  }
}
</style>
